<!--
 * @Author: jz-zhli Git@zhli
 * @Date: 2024-12-11 09:41:02
 * @LastEditors: jz-zhli Git@zhli
 * @LastEditTime: 2025-01-20 08:54:22
 * @FilePath: \xyd_zjk_20241206\src\views\test\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <lc-form ref="ruleFormRef" status-icon :rules="rules" :model="ruleForm">
    <lc-form-item prop="selectedData">
      <p class="seg-title">多选放大镜</p>
    <lc-magnifier-multi :remoteMethod="searchData" v-model="ruleForm.selectedData" :tableColumns="tableColumns" :selectConfigs="selectConfigs" :dialogConfigs="dialogConfigs">
      <template #infoBar>
        <div class="info" style="display: flex">
          <p style="margin-right: 50px">机构代码：1000121</p>
          <p>机构名称：中国农业银行有限公司</p>
        </div>
      </template>
    </lc-magnifier-multi>
    </lc-form-item>
    <lc-form-item label="金额中文大写" prop="inputMoney">
      <lc-input-money
        style="width: 800px"
        v-model="ruleForm.inputMoney"
        :clearable="true"
        placeholder="请输入"
        :showText="true"
        position="right"
        :maxIntegerDigits="5"
        :decimalDigits="5"
        separator="大写："
      >
      </lc-input-money>
    </lc-form-item>
    <lc-form-item label="测试" prop="test" >
      <el-input v-model="ruleForm.test"></el-input>
    </lc-form-item>
    <lc-form-item label="利率输入" prop="interest">
      <lc-rower>
        <lc-interest-rate
          class="lc-interest-rate"
          v-model="ruleForm.interest"
          :decimalDigits="4"
          :maxIntegerDigits="7"
          :clearable="true"
          placeholder="请输入"
          textAlign="center"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
          <template #suffix>
            $
          </template>
        </lc-interest-rate>
      </lc-rower>

      <p class="seg-title">标签页</p>
      <lc-rower>
        <lc-tabs v-model="tabsValue" :paneValue="paneValue" :draggble="true"></lc-tabs>
      </lc-rower>
    </lc-form-item>
    <lc-form-item label="日期范围选择（支持单选一项）" prop="datePicker">
      <lc-date-range-picker ref="datePickerRef" v-model="ruleForm.datePicker" :configs="datePickerConfigs">
      </lc-date-range-picker>
    </lc-form-item>
      <p class="seg-title">文字滚动</p>
    <lc-rower>
      <lc-text-scroll v-model="list" :timeout="5000">
          <li v-for="(item) in list" :key="item.id">
          {{ item.id }} --- {{ item.name }}
          </li>
      </lc-text-scroll>
    </lc-rower>
      <el-calendar>
      <template #date-cell="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }}
          <el-image style="width: 50px; height: 50px" :src="url" fit="fill" />
          {{ data.isSelected ? '✔️' : '' }}
        </p>
      </template>
    </el-calendar>
    <lc-form-item prop="inputMoneyrange">
      <p class="seg-title">金额输入范围</p>
      <lc-rower>
        <lc-input-amount-range
          v-model="ruleForm.inputMoneyrange"
          :clearable="true"
          placeholder="请输入"
          :maxIntegerDigits="5"
          :decimalDigits="2"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
          <template #suffix>
            %
          </template>
        </lc-input-amount-range>
      </lc-rower>
    </lc-form-item>
    <lc-form-item>
      <el-button @click="submitForm(ruleFormRef)">查看数据</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置数据</el-button>
    </lc-form-item>
  </lc-form>
</template>

<script lang="ts" setup>
// import 'cfae-components-test/theme-chalk/lc-layout.css'
import { ref,onMounted,reactive } from 'vue'
// import draggable from 'vuedraggable';
import Sortable from "sortablejs";
import { drop } from "lodash-es"
import { Search } from "@element-plus/icons-vue";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
defineOptions({
  name: "Table",
});
const tableColumns = [
      { label: "用户名", prop: "userName", showFlag: true, attrs: {} },
      { label: "年龄", prop: "age", showFlag: true, attrs: {} },
    ]
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  selectedData: [],
  inputMoney: '',
  interest: '',
  test: '',
  datePicker: {},
  inputMoneyrange: []
})
interface RuleForm {
  selectedData: Array<any>,
  inputMoney: string
  test: string
  interest: string
  datePicker: {}
  inputMoneyrange: number[]
}
let data = []
for (let i = 0; i <= 100; i++) {
  data.push({
    id: i + 1,
    userName: `姓名${i}`,
    age: i + 1
  })
}
function searchData(params: any) {
  let item = data.slice((params.pageIndex - 1) * 10,(params.pageIndex * 10))
  let res = {
    data: item,
    total: data.length
  }
  console.log(value.value)
  return res
}
const rules = reactive<FormRules<RuleForm>>({
  selectedData: [{ required: true, trigger: 'change' }],
  inputMoney: [{ required: true, trigger: 'blur' }],
  interest: [{ required: true, trigger: 'blur' }],
  test: [{ required: true, trigger: 'blur' }],
  datePicker: [{ required: true, trigger: 'blur' }],
  inputMoneyrange: [{ required: true, trigger: 'change' }]
})
const submitForm = async (formEl: FormInstance | undefined) => {
  console.log(ruleForm)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const url =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const list = ref([{
    id: 1,
    name: '红烧鱼'
  },
  {
    id: 2,
    name: '炒土豆'
  },
  {
    id: 3,
    name: '烧茄子'
  },
  {
    id: 4,
    name: '烧茄子'
  },
  {
    id: 5,
    name: '烧茄子'
  },
  {
    id: 6,
    name: '烧茄子'
  },
  {
    id: 7,
    name: '烧茄子'
  }
])
const datePicker = ref({});
const selectConfigs = ref({
  clearable: true,
  collapseTags: true,
  collapseTagsTooltip: true,
  maxCollapseTags: 3,
  disabled: false,
  placeholder: "请选择"
})
const dialogConfigs = ref({
  title: "",
  center: true,
  closeOnClickModal: true,
  closeOnPressEscape: true
})
const datePickerConfigs = ref({
  placeholder: '请选择日期',
  startPlaceholder: '请选择开始日期',
  type: 'datetimerange',
  clearable: true
});
const interest = ref("");
const tabsValue = ref("");
const visible = ref(false)
const isfullscreen = ref(false)
const inputMoney = ref("");
const inputMoneyrange = ref([]);
const paneValue = ref([{
  name: "1",
  label:"User"
},{
  name: "2",
  label:"Config"
},{
  name: "3",
  label:"Role"
},
])
function consoleData() {
  console.log("datePicker:" , datePicker.value)
  console.log("interest:" ,  interest.value)
  console.log("inputMoney:" ,  inputMoney.value)
  console.log("value:" ,  value.value)
  console.log("inputMoneyrange:" ,  inputMoneyrange.value)
}
const value = ref([
  {
    id: 1,
    userName: "姓名0",
    age: 1
  }
])

onMounted(() => {
  dragTab();
  // ruleForm.selectedData = [{
  //   id: 1,
  //   userName: "姓名0",
  //   age: 1
  // }]
  ruleForm.inputMoneyrange = [5,10]
})
const dragTab = () =>{
    const tab = document.querySelector("#drag-tab .el-tabs__nav"); //获取需要拖拽的tab
    Sortable.create(tab, {
      //oldIIndex拖放前的位置， newIndex拖放后的位置 , paneValue为遍历的tab签
      onEnd({ newIndex, oldIndex }) {
        //获取鼠标当前拖拽的el-tabs-pane
        const currTab = paneValue.value.splice(oldIndex, 1)[0];
        paneValue.value.splice(newIndex, 0, currTab); 
      },
    });
}
</script>

<style scoped>
.my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
}
.seer-svg-icon {
    font-size: 18px;
}
.is-selected {
  color: #1989fa;
}
</style>